<template>
    <div class='home-recommended'>
        <div class='home-recommended-title'>
            <div class='home-recommended-title-left'>
                <p class='home-recommended-title-left-p'>
                    推荐歌单
                </p>
            </div>
            <div class='home-recommended-title-center'></div>
            <div class='home-recommended-title-right'>
                <p class='home-recommended-title-right-p'>
                    歌单广场
                </p>
            </div>
        </div>

        <div class='home-recommended-block'>
            <div class='home-recommended-items' v-for='item of recommendedData' :key='item.id'>
                <div class='home-recommended-items-top'>
                    <img class='home-recommended-items-top-img' :src='item.imgUrl' />
                </div>
                <div class='home-recommended-items-bottom'>
                    <p>
                        {{item.desc}}
                    </p>
                </div>
            </div>
           
        </div>

    </div>
</template>

<script>
    export default {
        name: 'home-recommended',
        data () {
            return {
                recommendedData: [
                    {
                        "id": "01",
                        "imgUrl": "http://p2.music.126.net/ilXy5nmYheaghY-oxTAPAA==/109951164061328877.webp?imageView&thumbnail=369x0&quality=75&tostatic=0&type=webp",
                        "desc": "下次去KTY之前我要学会这些歌"
                    },
                    {
                        "id": "02",
                        "imgUrl": "http://p2.music.126.net/ezQ1H11R_VQrLcoSOadOlw==/109951164058798445.webp?imageView&thumbnail=369x0&quality=75&tostatic=0&type=webp",
                        "desc": "初夏呢喃 | 温言软语拂过耳蜗"
                    },
                    {
                        "id": "03",
                        "imgUrl": "http://p2.music.126.net/xuLZ5fFEBoyqWTdei72zwQ==/6012129580999737.webp?imageView&thumbnail=369x0&quality=75&tostatic=0&type=webp",
                        "desc": "DJ - 偏爱（咚鼓版）"
                    },
                    {
                        "id": "04",
                        "imgUrl": "http://p1.music.126.net/ZoxKzgVbVmisWw2IVtOXYQ==/109951163522175679.webp?imageView&thumbnail=369x0&quality=75&tostatic=0&type=webp",
                        "desc": "能柔能炸的R3hab"
                    },
                    {
                        "id": "05",
                        "imgUrl": "http://p1.music.126.net/WLxOZpN30vba-mA4Gv_vbA==/3333719256492254.webp?imageView&thumbnail=369x0&quality=75&tostatic=0&type=webp",
                        "desc": "DJ-串烧[咚鼓版]"
                    },
                    {
                        "id": "06",
                        "imgUrl": "http://p1.music.126.net/v-oupTvwE9MPjytGu07OUQ==/7776845743690686.webp?imageView&thumbnail=369x0&quality=75&tostatic=0&type=webp",
                        "desc": "【第一精品 最美女声电音】"
                    }
                ]
            }
        }
    }
</script>

<style lang='scss' scoped>
    @import '../../../assets/scss/glo.scss';
    .home-recommended-title {
        height:1.2222rem;
        margin-top:0.2rem;
        @include flex(flex, row);

        .home-recommended-title-left {
            width:2.4rem;
            height:100%;
          
            @include verticalCenter(center, center);

            .home-recommended-title-left-p {
                font-weight:bold;
                font-size:0.46rem;
                margin-left:0.1867rem;
                color:#000;
            }
        }
        .home-recommended-title-center {
            flex:1;
        }
        .home-recommended-title-right {
            width:2.4rem;
            height:100%;
           
            @include verticalCenter(center, center);

            .home-recommended-title-right-p {
                color:#000;
                background:#fff;
                font-size:0.2933rem;
                padding:0.1867rem;
                border-radius:0.4rem;
                border:0.0133rem #f5f5f5 solid;
            }
        }
    }

    .home-recommended-block {
        padding:0 0.12rem 0.2rem 0.4rem;
        @include flex(flex, row);
        flex-wrap: wrap;   
        .home-recommended-items {
            width:30.4%;
            
            margin-right:0.2667rem;

            .home-recommended-items-top {
                
                height:2.7667rem;
                background:#f5f5f5;
                border-radius:0.1467rem;
                overflow:hidden;
                .home-recommended-items-top-img {
                    width:100%;
                    border-radius:0.1467rem;
                }
            }
            .home-recommended-items-bottom {
                
                margin:0.1533rem 0 0.28rem 0;
           

                p {
                    color:#000;
                    line-height:0.5rem;
                }
            }
        }
        .home-recommended-items:nth-child(3) {
            margin-right:0;
        }
        
    }
</style>
